<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="600px">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-form-item label="原因" prop="refund_reason">
				<el-input
					type="textarea"
					v-model="form.refund_reason"
					maxlength="200"
					show-word-limit
					placeholder="请输入退款原因"
					clearable
					:autosize="{ minRows: 2, maxRows: 6 }"
					class="good_describe-input"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm">确定</el-button>
				<el-button @click="onCancel">取消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { orderRefundApply } from '/@/api/admin1';

export default {
	name: 'orderRefundDialog',
	setup() {
		const state = reactive({
			title: '发货前退款',
			open: false,
			form: {} as any,
			rules: {
				refund_reason: [{ required: true, message: '退款原因不能为空', trigger: 'blur' }],
			}, // 表单校验
			submitLoading: false,
		});

		const formRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					console.log('state.form', state.form);
					_orderRefundApply(state.form);
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			reset();
			callback = fn;
			state.open = true;
			state.form = config;
		};
		// 表单重置
		const reset = () => {
			state.form = {
				refund_reason: '',
				order_id: '',
			};
			(formRef.value as any)?.resetFields();
		};

		/********** 网络请求 **********/
		// 发货前退款
		const _orderRefundApply = (_data: any) => {
			orderRefundApply(_data)
				.then((res: any) => {
					console.log('发货前退款', res);
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};

		return {
			formRef,
			onSubmitForm,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped>
.theme-2 {
	border: 1px solid #ebeef5;
	border-bottom: 0;
	margin-bottom: 20px;
	.el-tag {
		margin-right: 10px;
	}
	.img_sku-item {
		display: inline-block;
		margin-right: 30px;
		vertical-align: middle;
		.img_sku-item__upload {
			width: 94px;
			height: 94px;
			margin-top: 6px;
			padding: 4px;
			border: 1px solid #e5e5e5;
			border-radius: 4px;
			background-color: #fff;
			position: relative;
			margin-bottom: 10px;

			.arrow {
				position: absolute;
				width: 0;
				height: 0;
				top: -8px;
				left: 10%;
				border-style: solid;
				border-color: transparent;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-bottom: 5px solid #333;

				&::after {
					position: absolute;
					display: block;
					width: 0;
					height: 0;
					top: 0;
					margin-left: -10px;
					border-color: transparent transparent #fff;
					border-style: solid;
					border-width: 0 10px 10px;
					content: '';
				}
			}

			.el-image,
			.img-uploader,
			.uploader-icon {
				width: 84px;
				height: 84px;
			}

			.uploader-icon {
				line-height: 84px;
				font-size: 30px;
			}

			.el-image {
				display: block;
			}
		}
	}
}
.required_title::before {
	content: '*';
	color: #f56c6c;
}
</style>
